<template>
  <div class="container">
    <MainMenu></MainMenu>
    <div class="index_banner">
      <el-carousel indicator-position="none" arrow="never" :interval="5000" :loop="true">
        <el-carousel-item v-for="(item,index) in sliderList" :key="index">
          <img :src="item.thumb"/>
        </el-carousel-item>
        <!--<el-carousel-item>-->
        <!--<img src="../../assets/images/banner/bg2.jpg"/>-->
        <!--</el-carousel-item>-->
        <!--<el-carousel-item>-->
        <!--<img src="../../assets/images/banner/bg3.jpg"/>-->
        <!--</el-carousel-item>-->
      </el-carousel>
      <div class="logo":style="{left:logo_loc_left,right:logo_loc_right,top:logo_loc_top,bottom: logo_loc_bottom}">
        <!--<img src="../../assets/images/banner/logo.png" />-->
        <!--<img style="height: 300px" src="../../assets/images/logo.png"/>-->
        <img style="height: 400px;width: 368px;" :src="logo"/>
      </div>
    </div>

    <div class="qrcode_box" v-if="true"  :style="{right:min_loc_right,bottom:min_loc_bottom,top:min_loc_top,left: min_loc_left}" >
      <!--<img  style="width: 90%;height: 90%;" src="../../assets/images/banner/minqrcode.png"/>-->
      <img v-if="minqrcode.length!=0"  style="width: 90%;height: 90%;" :src="minqrcode"/>
    </div>

    <!--<img v-if="topright_img_flag"  :src="topright_img" alt="" class="topright_img">-->
    <span v-if="topright_img_flag">
    <img :src="topright_img" alt="" class="topright_img" :style="{top:img_right_top,right:img_right_right}">
   </span>

  </div>
</template>

<script>
  import MainMenu from '../../components/mainmenu/MainMenu'

  export default {
    name: "index",
    data() {
      return {
        topright_img_flag:false,//是否显示
        vollege_id: '',
        sliderList: [],//轮播图数据
        logo:'',
        minqrcode:'',
        logo_loc_left:'',
        logo_loc_top:'',
        logo_loc_right:'',
        logo_loc_bottom:'',

        min_loc_right:'',
        min_loc_bottom:'',
        min_loc_left:'',
        min_loc_top:'',
        topright_img:'',
        img_right_top:'',
        img_right_right:'',
      }
    },
    components: {
      MainMenu
    },
    created() {

      this.vollege_id = this.$util.vollege_id;
      console.log('vollege_id', this.vollege_id)
      this.getSliderList();
      this.getColorList();
    },
    methods: {
      getColorList(){
        let that = this;
        that.$http.get("api/ScreenkApi/getOrgan?vollege_id="+that.$util.vollege_id,null,r=>{
          console.log('色调对象：',r.data);
          if (r.data.topright_img) {
            that.topright_img_flag=true;
            console.log('有图片');
          }else{
            that.topright_img_flag=false;
            console.log('没有图片');
          }



          that.logo_loc_left=r.data.logo_loc_left;
          that.logo_loc_top=r.data.logo_loc_top;
          that.logo_loc_right=r.data.logo_loc_right;
          that.logo_loc_bottom=r.data.logo_loc_bottom;


          that.min_loc_right=r.data.min_loc_right;
          that.min_loc_bottom=r.data.min_loc_bottom;
          that.min_loc_left=r.data.min_loc_left;
          that.min_loc_top=r.data.min_loc_top;
          that.topright_img=r.data.topright_img;

          that.img_right_right=r.data.img_right_right;
          that.img_right_top=r.data.img_right_top;

          that.logo=r.data.logo_img;
          that.minqrcode=r.data.minqrcode;
          that.$util.storage.set("dpimg",r.data.dpimg);
          that.$util.storage.set("topright_img",r.data.topright_img);
          that.$util.storage.set("dtimg",r.data.dtimg);
          that.$util.storage.set("color",r.data.color)
          that.$util.storage.set("home_img",r.data.home_img)
          that.$util.storage.set("line_bg",r.data.line_bg)
          that.$util.storage.set("logo_img",r.data.logo_img)
          that.$util.storage.set("menu_bg",r.data.menu_bg)
          that.$util.storage.set("minqrcode",r.data.minqrcode)
          that.$util.storage.set("new_left",r.data.new_left)
          that.$util.storage.set("new_right",r.data.new_right)
          that.$util.storage.set("title",r.data.title)
          that.$util.storage.set("line_title_bg",r.data.line_title_bg);

          that.$util.storage.set("jwd",r.data.jwd);

        });

      },



      getSliderList() {
        let that = this;
        that.$http.get("api/PcData/getIndexData",{vollege_id:that.vollege_id},r=>{
              console.log('新改版的轮播图数据为：',r.data.slides);
              that.sliderList= r.data.slides;
        });
      },
    },
  }
</script>

<style scoped>
  .container {
    position: relative;
    height: 100vh;
    /*background: url('../../assets/images/banner/bg.jpg') no-repeat;*/
    /*background-size: cover;*/
  }

  .qrcode_box {
    z-index: 9;
    position: absolute;
    /*right: 60px;*/
    /*bottom: 100px;*/
    width: 181px;
    height: 216px;

  }

  .index_banner img {
    /*width:100%;*/
  }

  .logo {
    z-index: 999;
    position: absolute;
    /*left: -71%;*/
    /*right: 0;*/
    /*top: -44%;*/
    /*bottom: 0;*/
    margin: auto;
    width: 368px;
    height: 400px;
    object-fit: cover;
  }

  .index_banner >>> .el-carousel__container {
    height: 100vh;
  }
  .topright_img{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 9999;
    /*height: 100px;*/
    /*width: 100px;*/
  }

</style>
